<template>
	<view class="records">
		<view class="detail">
			<view class="tab flex_r_around">
				<view class="list flex_c" @click="onTab(0)">
					<text>全部</text>
					<i :id="tab == 0 ? 'select' : ''"></i>
				</view>
				<view class="list flex_c" @click="onTab(5)">
					<text>审核成功</text>
					<i :id="tab == 5 ? 'select' : ''"></i>
				</view>
				<view class="list flex_c" @click="onTab(3)">
					<text>审核失败</text>
					<i :id="tab == 3 ? 'select' : ''"></i>
				</view>
			</view>
			
			<blankPage img="https://qiniu-cdn.maeiyun.com/imgs/blank/no_order.png" text="暂无提现记录" :width="161" :height="129" v-show="list.length == 0"></blankPage>
			
			<view class="info">
				<view class="list" v-for="(item,index) in list" :key="index">
					<view class="top">
						<view class="icon">
							<uni-icons type="wallet-filled" :size="22" color="#3393FF"></uni-icons>
						</view>
						<view class="data">
							<view class="title flex_r_between">
								<text>申请提现</text>
								<view v-if="item.status == 5">提现成功</view>
								<view id="fail" v-else-if="item.status == 3">提现失败</view>
								<view id="padding" v-else-if="item.status == 4">待打款</view>
								<view id="padding" v-else-if="item.status == 2">待上传发票</view>
								<view id="padding" v-else>审核中</view>
							</view>
							<view class="text">
								<view>
									{{item.create_time}}
								</view>
							</view>
							<view class="text flex_r_between">
								<view>{{item.store_id}}{{item.id}}</view>
								<text>{{Number(item.price) >= 0 ? '+' : '-'}} ¥{{Number(item.price).toFixed(2)}}</text>
							</view>
						</view>
					</view>
					<view class="bottom" v-if="item.status == 3">
						失败原因：{{item.check_content}}
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab:0,
				
				total:0,
				
				list:[],
				
				page:1,
			}
		},
		methods: {
			onTab(e){
				this.tab = e
				this.page = 1
				this.list = []
				this.getList()
			},
			getList(){
				this.$get('/store.bank/getWithdrawLog',{
					status:this.tab,
					page:this.page
				}).then(res=>{
					this.total = res.data.total
					res.data.data.forEach(item=>{
						this.list.push(item)
					})
				})
			},
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.total > this.list.length){
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="less" scoped>
	.records {
		padding: 30rpx 0 0;
		box-sizing: border-box;
	}
	.detail {
		background: #FFFFFF;
		border-radius: 20rpx;
		min-height: calc(100vh - 30rpx);
		padding-top: 20rpx;
		box-sizing: border-box;
	}

	.tab {
		padding: 20rpx 40rpx;
		position: sticky;
		top: 0;
		background: #FFF;
		.list {
			i {
				width: 80%;
				height: 10rpx;
				background: transparent;
				border-radius: 6rpx;
				margin-top: -10rpx;
			}
			#select {
				background: rgba(46,126,250,0.6);
			}
			text {
				font-size: 32rpx;
				color: #000000;
				line-height: 45rpx;
			}
		}
	}
	.info {
		.list {
			background: #F5F7F8;
			border-radius: 14rpx;
			padding: 30rpx;
			margin-top: 20rpx;
			.top {
				display: flex;
				.icon {
					margin-right: 22rpx;
				}
				.data {
					flex: 1;
					padding-bottom: 10rpx;
					.title {
						width: 100%;
						margin-bottom: 11rpx;
						text {
							font-size: 30rpx;
							color: #000000;
							line-height: 42rpx;
						}
						view {
							padding: 4rpx 10rpx;
							border-radius: 4rpx;
							background: rgba(0,145,255,0.1);
							font-size: 26rpx;
							color: #0091FF;
							line-height: 41rpx;
							text-align: center;
						}
						#fail {
							background: #FFE7E7;
							color: #FF0000;
						}
						#padding {
							background: rgba(250, 184, 42, 0.16);
							color: #FAB82A;
						}
					}
					.text {
						width: 100%;
						margin-bottom: 10rpx;
						view {
							font-size: 24rpx;
							color: #8E8E8E;
							line-height: 33rpx;
						}
						text {
							font-size: 30rpx;
							color: #FF0000;
							line-height: 42rpx;
						}
					}
				}
			}
			.bottom {
				font-size: 24rpx;
				color: #8E8E8E;
				line-height: 33rpx;
				padding: 11rpx 0 0 calc(22px + 22rpx);
				border-top: 1rpx solid #DBDBDB;
			}
		}
	}
</style>
